<template>
  <div class="header">
    <div>我的信息</div>
    <a href="/admin/login" target="_blank" class="admin-entry">管理员登录入口</a>
  </div>
  <div class="form-container">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" />
      </el-form-item>
      <el-form-item label="我的签名">
        <el-input v-model="form.personalSignature" placeholder="设置您的签名" type="textarea" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="0">女</el-radio>
          <el-radio :value="2">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  label="出生日期">
        <el-date-picker
            v-model="form.birthday"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="请选择日期"
        />
      </el-form-item>
      <el-form-item label="学校信息">
        <el-input v-model="form.school" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password" :placeholder="!form.password ? '您还没有设置密码哦':''"/>
      </el-form-item>
      <el-form-item>
        <el-button size="large" class="submit-btn" type="primary"
                   @click="onSubmit">保存信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import {getAllById, refresh, updateById} from "@/api/api.js";
import {ElNotification} from "element-plus";
import {useUserStore} from "@/stores/userInfoStore.js";

// do not use same name with ref
const form = ref({
  nickname: '123',
  personalSignature: '',
  sex:0,
  birthday: "2025-3-28",
  school: "湖北汽车工业学院",
  password:''
})


onMounted(async ()=>{
  const id = useUserStore().userInfo.userId;
  const res = await getAllById(id)
  console.log(res)
  if(res.code === 200){
    form.value = res.data
  }else {
    ElNotification.error("未知错误")
  }
})

async function refreshUser() {
  // 刷新用户信息
  const {data} = await refresh();
  const userStore = useUserStore()
  // 如果token为空，则使用原来的token
  if(!data.token){
    data.token = userStore.userInfo.token
  }
  // 更新用户信息
  userStore.setUserInfo(data)
}

const onSubmit = async () => {
  console.log('submit!')
  console.log(form.value)
  try{
    const res = await updateById(form.value)
    console.log(res)
    ElNotification.success("修改成功")
    await refreshUser()
  }catch (e) {
    ElNotification.error("修改失败"+e.message)
  }

}
</script>
<style lang="scss" scoped>
.header{
  height: 56px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding:0 20px 0 50px;
  padding-top: 16px;
  color: #2ae6ff;
  display: flex;
  justify-content: space-between;
  .admin-entry{
    cursor: pointer;
    color:var(--gray-font-color--);
    font-size: 12px;
  }
}
.form-container{
  padding: 20px;
}
.submit-btn{
  margin: 20px 48%;
}
</style>